// 编辑画布
.elegant-edit-canvas {
  flex: 1;
  overflow: hidden;
  background-image:
    linear-gradient(var(--elegant-designer-color) 14px, transparent 0),
    linear-gradient(90deg, transparent 14px, var(--elegant-designer-dot-color) 0);
  background-size: 15px 15px;

  .elegant-edit-range {
    overflow-y: auto;
    cursor: pointer;
    background-color: var(--elegant-edit-range-color);
    box-shadow:
      rgb(0 0 0 / 10%) 0 20px 25px -5px,
      rgb(0 0 0 / 4%) 0 10px 10px -5px;

    .elegant-draggable-range {
      width: 100%;
      height: 100%;
      min-height: 60px;
      border: 1px var(--elegant-border-color) dashed;
    }

    >div > .elegant-draggable-range {
      border: transparent;

      // 屏蔽antd element-plus label点击事件
      .ant-form-item-label > label,
      .el-form-item > .el-form-item__label {
        pointer-events: none;
      }
    }

    .root-node > .form-main > form > .elegant-draggable-range {
      border: transparent;
    }
  }

  .elegant-hover-widget {
    box-sizing: border-box;
    border: 1px var(--elegant-primary-color) dashed;
  }

  .elegant-checked-widget {
    background: var(--elegant-compoent-hover-color);
    border: 1px var(--elegant-primary-color) dashed;

    &::before {
      position: absolute;
      left: 0;
      width: 100%;
      height: 5px;
      content: "";
      background: var(--elegant-primary-color);
    }

    &.top,
    &.center {
      &::before {
        top: -5px;
      }
    }

    &.bottom {
      &::before {
        bottom: -5px;
      }
    }

    .elegant-widget-action-box {
      position: absolute;
      z-index: 999;
      display: flex;
      height: 30px;
      padding: 0 4px;
      background: var(--elegant-primary-color);
      border-radius: 4px 4px 0 0;

      .elegant-widget-action-item {
        display: flex;
        align-items: center;
        height: 30px;
        padding: 0 4px;
        color: white;
        cursor: pointer;

        .iconfont {
          font-size: 16px;
        }
      }
    }

    .form-main {
      padding: 6px;
      border: 1px solid #f0f0f0;
    }
  }

  // 隐藏设计区域滚动条
  .elegant-edit-screen-container {
    &::-webkit-scrollbar {
      // display: none;
      width: 6px;
      height: 6px;
    }
  }

  .elegant-edit-toolbar {
    box-sizing: border-box;
    height: 40px;
    background: var(--elegant-view-color);
    border-bottom: 1px solid var(--elegant-border-color);

    .elegant-divider {
      width: 1px;
      height: 20px;
      margin: 0 4px;
      background-color: var(--elegant-divider-color);
    }

    .elegant-action-item {
      height: 32px;
      color: var(--elegant-text-medium);
      border-radius: 4px;

      &.disabled {
        color: var(--elegant-text-disabled);
        cursor: no-drop;
      }

      &:hover {
        background: var(--elegant-action-hover-color);
      }
    }

    .elegant-device {
      border: 1px solid var(--elegant-border-color);

      .elegant-device-item {
        &.checked {
          color: var(--elegant-primary-color);
          background: var(--elegant-action-hover-color);
        }
      }
    }
  }

  .widget-box {
    cursor: move;
  }
}
